<template>
  <el-dialog :title="title" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'480px'">
    <el-form :model="channelForm" :ref="channelForm" label-width="100px" size="small">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="渠道名" required>
            <el-input size="small" v-model.trim="channelForm.channelName" placeholder="请输入渠道名" maxlength="30" show-word-limit @input="watchInput($event, 'channelName')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="渠道负责人">
            <el-input size="small" v-model.trim="channelForm.contacts" placeholder="请输入渠道负责人" maxlength="30" show-word-limit @input="watchInput($event, 'contacts')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="负责人手机号">
            <el-input size="small" v-model.trim="channelForm.contactPhone" placeholder="请输入负责人手机号" maxlength="11" show-word-limit @input="watchInput($event, 'contactPhone')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="启用/禁用">
            <el-switch size="small" :value="channelForm.status == 1 ? true : false" @change="switchChange"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelModel()">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="closeModel()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings'
import { AddChannelItem, UpdateChannelItem, GetChannelListItem } from '@/views/store-management/services/index'
export default {
  props: ['visible', 'title', 'channelId'],
  data() {
    return {
      channelForm: {
        channelName: '',
        contacts: '',
        contactPhone: '',
        status: 0,
      },
      submitLoading: false,
      id: '',
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (this.channelId && newValue === true) {
          this.id = this.channelId
          this.renderItem(this.channelId)
        }
      },
    },
  },
  methods: {
    watchInput(event, key) {
      this.channelForm[key] = this.inputReplaceSpecialChar(event)
    },
    switchChange(val) {
      //开关触发
      if (val == true) {
        this.channelForm.status = 1
      } else {
        this.channelForm.status = 0
      }
    },

    //清空表单信息
    clearForm() {
      this.channelForm.channelName = ''
      this.channelForm.contacts = ''
      this.channelForm.contactPhone = ''
      this.channelForm.status = '0'
    },

    //通过id获取渠道详情
    renderItem(newValue) {
      GetChannelListItem({ id: newValue }).then(res => {
        this.channelForm.channelName = res.data.channelName
        this.channelForm.contacts = res.data.contacts
        this.channelForm.contactPhone = res.data.contactPhone
        this.channelForm.status = res.data.status
      })
    },
    closeModel() {
      if (!this.channelForm.channelName) {
        this.$message.warning('请输入渠道名称!')
        return
      }
      if (this.channelForm.contactPhone && !Setting.expression[1].value.test(this.channelForm.contactPhone)) {
        this.$message.warning('手机号格式不正确!')
        return
      }
      this.submitLoading = true;
      const queryData = {
        channelName: this.channelForm.channelName,
        contacts: this.channelForm.contacts,
        status: this.channelForm.status,
      };
      if (this.channelForm.contactPhone) {
        queryData.contactPhone = this.channelForm.contactPhone
      }
      if (this.title === '新建渠道') {
        AddChannelItem(queryData)
        .finally(() => this.submitLoading = false)
        .then(data => {
          if (data.code == 200) {
            this.$message.success('新增成功')
            this.clearForm()
            this.$emit('update:visible', false)
            this.$emit('update')
          } else {
            this.$message.success('新增失败')
          }
        })
      } else {
        UpdateChannelItem({ id: this.id, ...queryData })
        .finally(() => this.submitLoading = false)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('编辑成功')
            this.clearForm()
            this.$emit('update:visible', false)
            this.$emit('update')
          } else {
            this.$message.error('编辑失败')
          }
        })
      }
    },
    cancelModel() {
      this.clearForm()
      this.$emit('update:visible', false)
    },
  },
}
</script>
